/*------------------------------------*
    #TREE
/*------------------------------------*

.tree
  margin: 0
  padding: 0
  list-style-type: none

.tree li
  white-space: nowrap

.tree li ul
  list-style-type: none
  margin: 0
  padding: 0

.tree-node
  white-space: nowrap
  cursor: pointer

.tree-hit
  cursor: pointer

.tree-checkbox
  +inline-block()
  padding: 1px 2px

.tree-expanded,
.tree-collapsed,
.tree-indent
  +inline-block()
  width: 16px
  height: 18px
  overflow: hidden

.tree-expanded
  background: image_url('tree_icons.png') no-repeat -18px 0

.tree-expanded-hover
  background: image_url('tree_icons.png') no-repeat -50px 0

.tree-collapsed
  background: image_url('tree_icons.png') no-repeat 0 0

.tree-collapsed-hover
  background: image_url('tree_icons.png') no-repeat -32px 0

.tree-lines .tree-expanded,
.tree-lines .tree-root-first .tree-expanded
  background: image_url('tree_icons.png') no-repeat -144px 0

.tree-lines .tree-collapsed,
.tree-lines .tree-root-first .tree-collapsed
  background: image_url('tree_icons.png') no-repeat -128px 0

.tree-lines .tree-node-last .tree-expanded,
.tree-lines .tree-root-one .tree-expanded
  background: image_url('tree_icons.png') no-repeat -80px 0

.tree-lines .tree-node-last .tree-collapsed,
.tree-lines .tree-root-one .tree-collapsed
  background: image_url('tree_icons.png') no-repeat -64px 0

.tree-line
  background: image_url('tree_icons.png') no-repeat -176px 0

.tree-join
  background: image_url('tree_icons.png') no-repeat -192px 0

.tree-joinbottom
  background: image_url('tree_icons.png') no-repeat -160px 0

.tree-folder
  &::before
    +inline-block()
    +font-icons(FontAwesome, '\f07b', 14px, inherit)

.tree-folder-open
  &::before
    +inline-block()
    +font-icons(FontAwesome, '\f07c', 14px, inherit)

.tree-file
  &::before
    +inline-block()
    +font-icons(FontAwesome, '\f15b', 12px, inherit)

.tree-loading
  &::before
    +font-icons(FontAwesome, '\f110', 14px, $gray)

.tree-checkbox0
  &::before
    +font-icons(FontAwesome, '\f10c', 14px, $gray)

.tree-checkbox1
  &::before
    +font-icons(FontAwesome, '\f05d', 14px, $gray)

.tree-checkbox2
  &::before
    +font-icons(FontAwesome, '\f192', 14px, $gray)

.tree-title
  +inline-block()
  font-size: $font-size-base
  white-space: nowrap
  padding: 0 2px

.tree-node-proxy
  font-size: 12px
  line-height: 20px
  padding: 0 2px 0 20px
  border-width: 1px
  border-style: solid
  z-index: 9900000

.tree-dnd-icon
  position: absolute
  top: 50%
  left: 2px
  display: inline-block
  width: 16px
  height: 18px
  margin-top: -9px

.tree-dnd-yes
  background: image_url('tree_icons.png') no-repeat -256px 0

.tree-dnd-no
  background: image_url('tree_icons.png') no-repeat -256px -18px

.tree-node-top
  border-top: 1px dotted red

.tree-node-bottom
  border-bottom: 1px dotted red

.tree-node-append .tree-title
  border: 1px dotted red

.tree-editor
  position: absolute
  top: 0
  width: 80px
  height: 18px
  padding: 1px 2px
  border: 1px solid #ccc
  font-size: 12px
  line-height: 14px

.tree-node-proxy
  background-color: #fff
  color: #000
  border-color: #95B8E7

.tree-node-hover
  background-color: #eaf2ff
  color: #000

.tree-node-selected
  background-color: #ffe48d
  color: #000

.tree-node-hidden
  display: none

.tree-icon
  color: $gray
